<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清理功能测试</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .result {
            margin: 10px 0;
            padding: 10px;
            border-radius: 3px;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .info {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .cleanup-button {
            background-color: #dc3545;
        }
        .cleanup-button:hover {
            background-color: #c82333;
        }
    </style>
</head>
<body>
    <h1>清理功能测试页面</h1>
    
    <div class="test-section">
        <h3>1. 测试后端API连接</h3>
        <button onclick="testBackendAPI()">测试后端API</button>
        <div id="backend-result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>2. 获取扫描结果</h3>
        <button onclick="getScanResults()">获取not_seeding文件</button>
        <div id="scan-result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>3. 模拟清理流程</h3>
        <button onclick="simulateCleanup()" class="cleanup-button">模拟清理选中文件</button>
        <div id="cleanup-result" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>4. 直接访问清理页面</h3>
        <button onclick="openCleanupPage()">打开清理页面</button>
        <div id="page-result" class="result"></div>
    </div>

    <script>
        const API_BASE_URL = 'http://localhost:8000/api';
        let scanResults = [];
        
        async function testBackendAPI() {
            const resultDiv = document.getElementById('backend-result');
            try {
                const response = await axios.get(`${API_BASE_URL}/scan/status`);
                resultDiv.className = 'result success';
                resultDiv.innerHTML = `✅ 后端API连接成功<br>状态: ${response.status}<br>数据: ${JSON.stringify(response.data)}`;
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `❌ 后端API连接失败<br>错误: ${error.message}`;
            }
        }
        
        async function getScanResults() {
            const resultDiv = document.getElementById('scan-result');
            try {
                const response = await axios.get(`${API_BASE_URL}/scan/results?status=not_seeding`);
                scanResults = response.data;
                resultDiv.className = 'result success';
                resultDiv.innerHTML = `✅ 获取扫描结果成功<br>文件数量: ${scanResults.length}<br>前3个文件: ${JSON.stringify(scanResults.slice(0, 3), null, 2)}`;
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `❌ 获取扫描结果失败<br>错误: ${error.message}`;
            }
        }
        
        async function simulateCleanup() {
            const resultDiv = document.getElementById('cleanup-result');
            
            if (scanResults.length === 0) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = '❌ 请先获取扫描结果';
                return;
            }
            
            try {
                // 选择前3个文件进行清理测试
                const selectedFiles = scanResults.slice(0, 3);
                const fileIds = selectedFiles.map(f => f.id).join(',');
                
                resultDiv.className = 'result info';
                resultDiv.innerHTML = `🔄 模拟清理流程...<br>选中文件ID: ${fileIds}<br>选中文件: ${selectedFiles.map(f => f.file_name).join(', ')}`;
                
                // 构建清理页面URL
                const cleanupUrl = `http://localhost:3000/cleanup?files=${fileIds}`;
                
                // 测试清理页面是否可以访问
                const response = await axios.get(cleanupUrl);
                
                resultDiv.className = 'result success';
                resultDiv.innerHTML = `✅ 清理页面访问成功<br>状态码: ${response.status}<br>URL: <a href="${cleanupUrl}" target="_blank">${cleanupUrl}</a><br>选中的文件:<br>${selectedFiles.map(f => `- ${f.file_name} (${f.file_path})`).join('<br>')}`;
                
            } catch (error) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `❌ 清理流程测试失败<br>错误: ${error.message}`;
            }
        }
        
        function openCleanupPage() {
            const resultDiv = document.getElementById('page-result');
            
            if (scanResults.length === 0) {
                resultDiv.className = 'result error';
                resultDiv.innerHTML = '❌ 请先获取扫描结果';
                return;
            }
            
            const selectedFiles = scanResults.slice(0, 3);
            const fileIds = selectedFiles.map(f => f.id).join(',');
            const cleanupUrl = `http://localhost:3000/cleanup?files=${fileIds}`;
            
            resultDiv.className = 'result success';
            resultDiv.innerHTML = `✅ 正在打开清理页面...<br>URL: ${cleanupUrl}`;
            
            // 在新窗口中打开清理页面
            window.open(cleanupUrl, '_blank');
        }
        
        // 页面加载时自动测试后端连接
        window.onload = function() {
            testBackendAPI();
        };
    </script>
</body>
</html>